<template>
  <div class="sieves-contents" v-if="sieves.deviceName">
    <el-row class="sieves-content__row">
      <el-col :span="12">
        <item-wrap box-name="dv-border-box13" :title="sieves.deviceName +'-视频监控'" class="sieves-content__col">
          <template v-if="cameraList.length > 1">
            <el-row>
              <el-col :span="12" class="sieves-content__col_camera_box">
                <video-player v-if="cameraList.length > 0" :device-id="cameraList[0].id" style="height: 97%;width: 100%" />
              </el-col>
              <el-col :span="12" class="sieves-content__col_camera_box">
                <video-player v-if="cameraList.length > 0" :device-id="cameraList[1].id" style="height: 97%;width: 100%" />
              </el-col>
            </el-row>
          </template>
          <template v-else>
            <video-player v-if="cameraList.length > 0" :device-id="cameraList[0].id" style="height: 97%;width: 100%" />
          </template>
        </item-wrap>
      </el-col>
      <el-col :span="12" class="sieves-contents__right">
        <item-wrap box-name="dv-border-box13" :title="sieves.deviceName +'-煤占比趋势图'" class="sieves-content__col">
          <top-right :device-id="page"/>
        </item-wrap>
      </el-col>
    </el-row>
    <el-row class="sieves-content__row" align="bottom">
      <el-col :span="12">
        <item-wrap box-name="dv-border-box13" :title="sieves.deviceName +'-煤层厚度截面图'" class="sieves-content__col">
          <bottom-left :device-id="page"/>
        </item-wrap>
      </el-col>
      <el-col :span="12" class="sieves-contents__right">
        <item-wrap box-name="dv-border-box13" :title="sieves.deviceName +'-煤流统计图'" class="sieves-content__col">
          <bottom-right :device-id="page"/>
        </item-wrap>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { GET_RESTFUL } from '@/api'
import TopRight from "./top-right"
import BottomLeft from "./bottom-left"
import BottomRight from "./bottom-right"


const props = defineProps({
  page: {
    type: String,
    default: '',
    required: true
  }
})

const sieves = ref({})

const cameraList = ref<Camera[]>([])

onMounted(()=>{
  getSieves()
  getCameraList()
})


watch(
    () => props.page,
    (val: any) => {
      fetchData()
    }
)

function fetchData(){
  getSieves()
  getCameraList()
}

function getCameraList(){
  cameraList.value = []
  GET_RESTFUL('getCamera',props.page).then(resp=>{
    cameraList.value = resp.data;
  })
}

function getSieves(){
  GET_RESTFUL('getDeviceInfo',props.page).then(resp=>{
    sieves.value = resp.data
  })
}
</script>


<style scoped lang="scss">
.sieves-contents {
  width: 100%;
  min-height: calc(100% - 60px);
  height: 960px;
  margin-top: 10px;
  .sieves-content__row{
    height: 480px;
    .sieves-content__col {
      height: 470px;
      width: 860px;
      .sieves-content__col_camera_box{
        height: 420px;
        width: 100%;
      }
    }
  }
  .sieves-contents__right {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
  }
}
</style>